<div class="navigate">
	<div class="L"></div>
    <div class="C"><a class="home" href="<?=$lang_path?>" lang="<?=$array_lang[$lang_id][0]?>"><?=tdt('Trang_chu')?></a><img src="<?=$theme_imagepath?>navigate_icon.gif" /><span lang="<?=$array_lang[$lang_id][0]?>"><?=tdt('Ban_do')?></span></div>
    <div class="R"></div>
</div>

<?
$sqlWhere = " AND gmap_active = 1 ";
$sqlOrderBy = "gmap_order ASC";
//End get page break params
$db_listing	= new db_query("SELECT *
									 FROM google_maps
									 WHERE lang_id = " . $lang_id . $sqlWhere . "
									 ORDER BY " . $sqlOrderBy);
$No = 0;
$arrListing = array();
while ($listing = mysql_fetch_array($db_listing->result))
{
	$arrListing[$No] = $listing;
	++$No;
}
?>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script type="text/javascript">
var map;
var infowindow;
var marker= new Array();
var old_id= 0;
var infoWindowArray= new Array();
var infowindow_array= new Array();
function initialize(){
	var defaultLatLng = new google.maps.LatLng(<?=$arrListing[0]['gmap_lat']?>,<?=$arrListing[0]['gmap_lng']?>);
	var myOptions= {zoom: 16, center: defaultLatLng, scrollwheel : false, mapTypeId: google.maps.MapTypeId.ROADMAP };  
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	map.setCenter(defaultLatLng);
	<? for ($i=0;$i<$No;$i++) {?>
	var arrLatLng = new google.maps.LatLng(<?=$arrListing[$i]['gmap_lat']?>, <?=$arrListing[$i]['gmap_lng']?>);
	infoWindowArray[<?=$arrListing[$i]['gmap_id']?>] = '<div class="map_description"><div class="map_title"><?=$con_company?></div><? if ($arrListing[$i]['gmap_default']) {?><div class="default">(Trụ sở chính)</div><? }?><div><b>Địa chỉ:</b> <?=$arrListing[$i]['gmap_address']?></div><div><b>Tel:</b> <?=$arrListing[$i]['gmap_phone']?></div></div>';
	loadMarker(arrLatLng, infoWindowArray[<?=$arrListing[$i]['gmap_id']?>], <?=$arrListing[$i]['gmap_id']?>);
	<? }?>
	moveToMaker(<?=$arrListing[0]['gmap_id']?>);
}
function loadMarker(myLocation, myInfoWindow, id){
	marker[id] = new google.maps.Marker({position: myLocation, map: map, visible:true});
	var popup = myInfoWindow;
	infowindow_array[id] = new google.maps.InfoWindow({ content: popup});
	google.maps.event.addListener(marker[id], 'mouseover', function() {
		if (id == old_id) return;
		if (old_id > 0) infowindow_array[old_id].close();
		infowindow_array[id].open(map, marker[id]);old_id = id;}
	);
	google.maps.event.addListener(infowindow_array[id], 'closeclick', function() {old_id = 0;});
}
function moveToMaker(id){
	var location = marker[id].position;
	map.setCenter(location);
	if (old_id > 0) infowindow_array[old_id].close();
	infowindow_array[id].open(map, marker[id]);
	old_id = id;
}
</script>

<style type="text/css">
#map_canvas{
	width:590px;
	height:400px;
	float:right;
}
.map_description{
	color:#000000;
	width:275px;
	overflow:auto;
}
.map_description .default{
	color:#FF0000;
}
.map_description div{
	margin:3px;
	line-height:17px;
}
.map_list_address{
	float:left;
	width:250px;
	height:500px;
	overflow:hidden;
}
.map_list_address .list{
	line-height:17px;
	margin-bottom:5px;
}
.map_list_address span{
	color:#FF0000;
}
.map_title{
	color:#FF0000;
	font-weight:bold;
}
</style>

<div class="module_top"><div class="fl"></div><div class="fr"></div></div>
<div class="padding module_larger_border">
	<div id="map_canvas"></div>
    <div class="clear"></div>
</div>
<div class="module_bottom"><div class="fl"></div><div class="fr"></div></div>